<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尚品汇</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="warp">
        <header class="header">
            <div class="header_top">
                <div class="header_top_center">
                    <div class="header_top_center_left">
                        <span>欢迎来到尚品汇！ 请</span>
                        <a href="#">登录</a>
                        <a href="#">注册</a>
                    </div>
                    <div class="header_top_center_right">
                        <a href="#">我的订单</a>
                        <a href="#">我的购物车</a>
                        <a href="#">我的商品化</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">商家后台</a>
                    </div>

                </div>
            </div>
            <div class="header_bottom">
                <h1><a href="#"><img src="./images/Logo.png" alt=""></a></h1>
                <div class="header_bottom_right">
                    <input type="text" name="" id="" placeholder="请输入搜索内容">
                    <input type="button" value="搜索">

                </div>

            </div>

        </header>
        <div class="center">
            <div class="center_zhong">
                <nav>
                    <a href="#">全部商品分类</a>
                    <a href="#">服装城</a>
                    <a href="#">美妆馆</a>
                    <a href="#">商品汇超市</a>
                    <a href="#">全球购</a>
                    <a href="#">闪购</a>
                    <a href="#">团购</a>
                    <a href="#">有趣</a>
                    <a href="#">秒杀</a>
                </nav>

            </div>
        </div>
        <div class="picture">
            <div class="mianbiao">
                <!-- <a href="#">手机，数码，通讯</a>
                <span>/</span>
                <a href="#">手机</a>
                <span>/</span>
                <a href="#">苹果手机</a>
                <span>/</span>
                <a href="#">苹果6s</a> -->
            </div>
            <div class="picture_left">
                <div class="picture_left_top">
                    <img src="./images/s1.png" alt="">
                </div>
                <div class="picture_left_bottom">
                    <div class="picture_left_bottom_left">
                        <a href="javascript:;">&lt;</a>
                    </div>

                    <div class="picture_left_bottom_tu">

                        <div class="waibian">
                            <!-- <div>
                                <img src="./images/b1.png" alt="">
                            </div>
                            <div>
                                <img src="./images/b2.png" alt="">
                            </div>
                            <div>
                                <img src="./images/b3.png" alt="">
                            </div>
                            <div>
                                <img src="./images/b1.png" alt="">
                            </div>
                            <div>
                                <img src="./images/b2.png" alt="">
                            </div>
                            <div>
                                <img src="./images/b3.png" alt="">
                            </div>
                            <div>
                                <img src="./images/b1.png" alt="">
                            </div>
                            <div>
                                <img src="./images/b2.png" alt="">
                            </div>
                            <div>
                                <img src="./images/b3.png" alt="">
                            </div> -->
                        </div>

                    </div>
                    <div class="picture_left_bottom_right">
                        <a href="javascript:;">&gt;</a>
                    </div>
                </div>
            </div>
            <div class="picture_right">

            </div>
        </div>
        <div class="xia">
            <div class="xia_zuo">
                <div class="">
                    <h4 class="xia_zuo_shang">
                        相关分类
                    </h4>
                    <h4 class="xia_zuo_shang_1">
                        推荐品牌
                    </h4>
                </div>
                <div class="xia_zuo_xia">
                    <div class="yincang">
                        <ul class="xia_zuo_xia_wenzi">
                            <li>手机</li>
                            <li>手机壳</li>
                            <li>内存卡</li>
                            <li>iphone配件</li>
                            <li>贴膜</li>
                            <li>手机耳机</li>
                            <li>移动电源</li>
                            <li>平板电脑</li>
                        </ul>
                        <ul class="xia_zuo_xia_tupian">
                            <li><img src="./images/part01.png" alt="">
                                <span>Apple苹果iPhone 6s (A1699)</span>
                                <p>¥6088.00</p>
                                <button>加入购物车</button>
                            </li>
                            <li><img src="./images/part01.png" alt="">
                                <span>Apple苹果iPhone 6s (A1699)</span>
                                <p>¥6088.00</p>
                                <button>加入购物车</button>
                            </li>
                            <li><img src="./images/part01.png" alt="">
                                <span>Apple苹果iPhone 6s (A1699)</span>
                                <p>¥6088.00</p>
                                <button>加入购物车</button>
                            </li>
                            <li><img src="./images/part01.png" alt="">
                                <span>Apple苹果iPhone 6s (A1699)</span>
                                <p>¥6088.00</p>
                                <button>加入购物车</button>
                            </li>

                        </ul>
                    </div>

                    <div class="yincangneirong">
                        推荐品牌内容
                    </div>
                </div>

            </div>
            <div class="xia_you">
                <div class="xia_you_shang">
                    <h4>选择搭配</h4>
                    <div class="xia_you_shang_tupian">
                        <div class="left">
                            <img src="./images/l-m01.png" alt="">
                            <p>￥<span>5299</span></p>
                            <i>+</i>
                        </div>
                        <ul class="zhong">
                            <li>
                                <img src="./images/dp01.png" alt="">
                                <span>Feless费勒斯VR</span>
                                <div>
                                    <input type="checkbox" value="50">
                                    <span>50</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/dp02.png" alt="">
                                <span>Feless费勒斯VR</span>
                                <div>
                                    <input type="checkbox" value="100">
                                    <span>100</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/dp03.png" alt="">
                                <span>Feless费勒斯VR</span>
                                <div>
                                    <input type="checkbox" value="150">
                                    <span>150</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/dp04.png" alt="">
                                <span>Feless费勒斯VR</span>
                                <div>
                                    <input type="checkbox" value="200">
                                    <span>200</span>
                                </div>
                            </li>
                        </ul>
                        <div class="right">
                            <div>已购0件商品</div>
                            <p>套餐价</p>
                            <i>5299</i>
                            <button>加入购物车</button>

                        </div>

                    </div>

                </div>
                <div class="xia_you_xia">
                    <ul class="shang">
                        <li class="bianhua">
                            <a href="javascript:;">商品介绍</a>
                        </li>
                        <li>
                            <a href="javascript:;">规格包装</a>
                        </li>
                        <li>
                            <a href="javascript:;">售后与保障</a>
                        </li>
                        <li>
                            <a href="javascript:;">商品评价</a>
                        </li>
                        <li>
                            <a href="javascript:;">手机社区</a>
                        </li>
                    </ul>
                    <div class="xiaxuanxiang">
                        <p>
                            分辨率：1920*1080(FHD) <br>
                            后置摄像头：1200万像素 <br>
                            前置摄像头：500万像素 <br>
                            核 数：其他 <br>
                            频 率：以官网信息为准 <br>
                            品牌： Apple <br>
                            商品名称：APPLEiPhone 6s Plus <br>
                            商品编号：1861098 <br>
                            商品产地：中国大陆 <br>
                            商品毛重：0.51kg <br>
                            热点：指纹识别，Apple Pay，金属机身，拍照神器 <br>
                            系统：苹果（IOS）<br>
                            像素：1000-1600万品毛重：0.51kg<br>
                            机身内存：64GB<br>
                            <img src="./images/intro01.png" alt="">
                            <img src="./images/intro02.png" alt="">
                            <img src="./images/intro03.png" alt="">
                        </p>
                        <p>
                            规格包装
                        </p>
                        <p>
                            售后与保障
                        </p>
                        <p>
                            商品评价
                        </p>
                        <p>
                            手机社区
                        </p>
                    </div>
                </div>

            </div>

        </div>


    </div>

    </div>
    <script src="./js/data.js"></script>
    <script>
        // 面包导航
        mianbaodaohang();
        function mianbaodaohang() {
            var mianbao = document.querySelector(".mianbiao")
            var arr = goodData.path;
            for (i = 0; i < arr.length; i++) {
                var abiao = document.createElement("a")
                var span = document.createElement("span")
                if (i == arr.length - 1) {
                    // var abiao = document.createElement("a")
                    abiao.innerHTML = arr[i].title
                    mianbao.appendChild(abiao)

                } else {
                    // var abiao = document.createElement("a")
                    // var span = document.createElement("span")
                    abiao.innerHTML = arr[i].title
                    abiao.href = arr[i].url
                    span.innerHTML = "/"
                    mianbao.appendChild(abiao)
                    mianbao.appendChild(span)
                }

            }
        }
        //    缩放图
        suofangtu()
        function suofangtu() {
            var picturetop = document.querySelector(".picture_left_top")
            var picturelefttopimg = document.querySelector(".picture_left_top img")
            var arr1 = goodData.imagessrc
            picturetop.onmouseenter = function () {
                var mark = document.createElement("div")
                mark.className = "mark"
                picturetop.appendChild(mark)
                //    放大镜图
                var bigpic = document.createElement("div")
                bigpic.className = "bigpic"
                picturetop.appendChild(bigpic)
                // 大图片
                var bigimg = document.createElement("img")
                bigimg.className = "bigimg"
              
                bigimg.src = arr1[0].b
                bigpic.appendChild(bigimg)




                // 点击小图上方大图跟着改变  
                var waibiandiv = document.querySelectorAll(".waibian div")
                var waibiandivimg = document.querySelectorAll(".waibian div img")
                var picturelefttopimg = document.querySelector(".picture_left_top img")
                var big = document.querySelector(".bigpic")
                var arr = goodData.imagessrc
                var bigimg = document.querySelector(".bigimg")
                waibiandivimg.forEach(function (iteam, index) {
                    iteam.onclick = function () {
                        picturelefttopimg.src = arr[index].s
                        
                      
                    }
                    bigimg.src =picturelefttopimg.src
                   
                })
              





                // 移动
                picturetop.onmousemove = function (e) {
                    // 右边大图跟随左边大图
                    // 左移动
                    var left = e.clientX - picturetop.getBoundingClientRect().left - mark.offsetWidth / 2
                    // 上移动
                    var top = e.clientY - picturetop.getBoundingClientRect().top - mark.offsetHeight / 2
                    if (left <= 0) {
                        left = 0
                    }
                    if (left >= picturetop.clientWidth - mark.clientWidth) {
                        left = picturetop.clientWidth - mark.clientWidth
                    }
                    if (top <= 0) {
                        top = 0
                    }
                    if (top >= picturetop.clientHeight - mark.clientHeight) {
                        top = picturetop.clientHeight - mark.clientHeight
                    }
                    // 大图位移的距离
                    bigimg.style.left = -(left * 1.2) + "px"
                    bigimg.style.top = -(top * 1.2) + "px"

                    //   mark位移的距离
                    mark.style.left = left + "px"
                    mark.style.top = top + "px"
                }
                //    移出
                picturetop.onmouseleave = function () {
                    picturetop.removeChild(mark)
                    picturetop.removeChild(bigpic)
                }

            }

        }


        // 添加轮播图的数据
        var arr = goodData.imagessrc
        var wai = document.querySelector(".waibian")
        var picturelefttopimg = document.querySelector(".picture_left_top img")
        var waibiandivimg = document.querySelectorAll(".waibian div img")
        arr.forEach(function (iteam, itea) {
            var waibiandiv = document.createElement("div")
            var waibianimg = document.createElement("img")
            waibianimg.src = iteam.s
            waibiandiv.appendChild(waibianimg)
            wai.appendChild(waibiandiv)
            

        });
        //    获取包裹小图div的宽
        // var wai = document.querySelector(".waibian")
        // var waibiandiv = document.querySelectorAll(".waibian div")
        // waibiandiv.forEach(function (it, id) {
        //     var a = (it.offsetWidth + 20) * (id+1)
        //     console.log(a)
        //     wai.style.with = a 
        //     console.log(wai.style.with)
        // })
        // 轮播
        var pictureleft = document.querySelector(".picture_left_bottom_left")
        var pictureright = document.querySelector(".picture_left_bottom_right")
        var wai = document.querySelector(".waibian")
        var waibiandiv = document.querySelectorAll(".waibian div")
        var pictureleftbottomtu = document.querySelector(".picture_left_bottom_tu")

        var sunmarr = 0;
        // 右箭头
        pictureright.onclick = function () {
            //    一次移动的距离
            var marr = (waibiandiv[0].offsetWidth + 20) * 2
            var max = wai.clientWidth - pictureleftbottomtu.clientWidth
            sunmarr = sunmarr + marr

            if (sunmarr >= max) {
                sunmarr = max
            }
            wai.style.marginLeft = -sunmarr + "px"
        }
        // 左箭头
        pictureleft.onclick = function () {
            var marr = (waibiandiv[0].offsetWidth + 20) * 2
            sunmarr = sunmarr - marr
            console.log(sunmarr)
            if (sunmarr <= 0) {
                sunmarr = 0
                console.log(1)
            }
            wai.style.marginLeft = -sunmarr + "px"
        }


        //   渲染详情
        xuanranxiangqing();
        function xuanranxiangqing() {
            var pictureright = document.querySelector(".picture_right")
            var goodDatas = goodData.goodsDetail;
            var str = ` 
      <h1 class="picture_right_biao">
                    ${goodDatas.title}
                </h1>
                <div class="picture_right_youhui">
                    ${goodDatas.recommend}
                </div>
                <div class="picture_right_jiage">
                    <!-- 上半 -->
                    <div class="picture_right_jiage_shang">
                        <span>价&emsp;&emsp;格</span>
                        <span>￥</span>
                        <span class="picture_right_jiage_jiage">${goodDatas.price}</span>
                        <a href="javascript:;">降价通知</a>
                        <span>累计评价${goodDatas.evaluateNum}</span>
                    </div>
                    <!-- 下半 -->
                    <div class="picture_right_jiage_xia">
                        <span>促&emsp;&emsp;销</span>
                        <div>
                            <span>${goodDatas.promoteSales.type}</span>
                            <span>${goodDatas.promoteSales.content}</span>
                        </div>

                    </div>

                </div>
                <div class="picture_right_zhichi">
                    <div class="picture_right_zhichi_shang">
                        <span>支&emsp;&emsp;持</span>
                        <span>${goodDatas.support}</span>
                    </div>
                    <div class="picture_right_zhichi_xia">
                        <span>配 &nbsp;送&nbsp;至</span>
                        <span>${goodDatas.address}</span>
                    </div>
                </div>
                <div class="picture_right_xiangqing">
                    <div class="picture_right_hezi"></div>
                    
                   
                </div>
                <div class="picture_right_gouwuche">
                    <div class="picture_right_gouwuche_zuo">
                        <input type="text" name="" id="">
                        <p>
                            <a href="javascript:;">+</a>
    
                            <a href="javascript:;">-</a>
                        </p>
                    </div>
                    <div class="picture_right_gouwuche_you">
                        <button>加入购物车</button>
                    </div>
                </div>
      `
            pictureright.innerHTML = str
        }

        //   手机详情数据渲染
        shoujishuju()
        function shoujishuju() {
            var arr1 = goodData.goodsDetail.crumbData
            var xiangqingbox = document.querySelector(".picture_right_xiangqing")
            arr1.forEach(function (iteam, index) {
                var dl = document.createElement("dl")
                var dt = document.createElement("dt")
                dl.setAttribute("indexdl", index)
                dt.innerHTML = iteam.title
                dl.appendChild(dt)
                xiangqingbox.appendChild(dl)
                iteam.data.forEach(function (iteam1, index1) {
                    var dd = document.createElement("dd")
                    dd.setAttribute("indexdd", iteam1.changePrice)
                    dd.innerHTML = iteam1.type

                    dl.appendChild(dd)

                })

            })
        }



        // }
        // 点击dd详情添加数据
        dianjixiangqing()
        function dianjixiangqing() {
            var xiangqinghezi = document.querySelectorAll(".picture_right_xiangqing dl dd")
            var picturerighthezi = document.querySelector(".picture_right_hezi")
            var arr = document.querySelectorAll("arr")
            var xiangqinghezidl = document.querySelectorAll(".picture_right_xiangqing dl")
            var arr1 = goodData.goodsDetail.crumbData
            var jiage = document.querySelector(".left p span")
            var gouwuchejiage = document.querySelector(".right i")
            console.log(arr1[1].data)
            // 点击谁谁变红
            // dd
            var arr = new Array(4);
            arr.fill(0)
            xiangqinghezi.forEach(function (iteam, index) {
                iteam.onclick = function () {
                    picturerighthezi.innerHTML = ""
                    var ddparents = iteam.parentNode
                    // 点谁谁变
                    for (j = 0; j < ddparents.childNodes.length; j++) {
                        ddparents.childNodes[j].style.color = "black"
                    }
                    iteam.style.color = "red"
                    // 获取父元素的下标
                    var aa = ddparents.getAttribute("indexdl")
                    arr[aa] = {
                        text: iteam.innerHTML,
                        changeprice: iteam.getAttribute("indexdd")
                    }
                    // console.log(arr)
                    // console.log(arr[aa])

                    for (i = 0; i < arr.length; i++) {
                        if (arr[i] != 0) {
                            var span = document.createElement("span")
                            var a = document.createElement("a")
                            a.setAttribute("indexa", i)
                            span.innerHTML = arr[i].text
                            a.innerHTML = "X"
                            span.appendChild(a)
                            picturerighthezi.appendChild(span)

                            // 点击X号
                            var asun = document.querySelectorAll(".picture_right_hezi span a")
                            asun.forEach(function (iteama, aaa) {
                                iteama.onclick = function () {
                                    var aIndex = iteama.getAttribute("indexa")
                                    console.log(aIndex)
                                    arr[aIndex] = 0
                                    picturerighthezi.removeChild(iteama.parentNode)
                                    xiugaijiage()
                                    // 获取a的下标并取消dd的颜色让他回到第一个颜色
                                    var axia = iteama.getAttribute("indexa")
                                    var ddd = xiangqinghezidl[axia].querySelectorAll("dd")
                                    console.log(ddd)
                                    for (k = 0; k < ddd.length; k++) {
                                        ddd[k].style.color = "black"
                                    }
                                    ddd[0].style.color = "red"


                                }

                            })
                        }
                    }
                    // 改变价格
                    xiugaijiage()
                    function xiugaijiage() {
                        var picturerightjiage = document.querySelector(".picture_right_jiage_jiage")
                        var price = 5299;
                        arr.forEach(function (iteaa) {
                            //  console.log(iteaa.changeprice) 
                            if (iteaa.changeprice) {
                                price = price + Number(iteaa.changeprice)
                            }
                        })
                        picturerightjiage.innerText = price
                        jiage.innerHTML = picturerightjiage.innerText
                        gouwuchejiage.innerHTML = picturerightjiage.innerText
                    }


                    // // 价格实时发生变化
                    // function jiagebianhua() {
                    //     var picturerightjiage = document.querySelector(".picture_right_jiage_jiage")
                    //     var jjj = Number(picturerightjiage.innerText)
                    //    var arrjiage = new Array(4)
                    //    arrjiage.fill(0)


                    //     var arr2 = goodData.goodsDetail.crumbData
                    //     var ff = arr2[aa].data
                    //     var mm = iteam.getAttribute("indexdd")
                    //     console.log(ff[mm].changePrice)

                    //     for(i=0;i<arrjiage.length;i++){
                    //         arrjiage[aa]=ff[mm].changePrice
                    //     }
                    //     console.log(arrjiage)
                    //     jjj = jjj + Number(ff[mm].changePrice)
                    //     console.log(jjj)
                    //     picturerightjiage.innerText = jjj

                    // }


                }
            })
        }


        // 点击推荐卡
        dianji()
        function dianji() {
            //   点击相关推荐
            var xiazuoshang1 = document.querySelector(".xia_zuo_shang_1")
            var yincang = document.querySelector(".yincang")
            var yincangneirong = document.querySelector(".yincangneirong")
            var xiazuoshang = document.querySelector(".xia_zuo_shang")
            xiazuoshang1.onclick = function () {
                yincang.style.display = "none"
                yincangneirong.style.opacity = 1
                xiazuoshang1.className = "active"
                xiazuoshang.className = ".xia_zuo_shang"
                console.log(11)
            }
            // 点击相关分类

            xiazuoshang.onclick = function () {
                yincang.style.display = "block"
                yincangneirong.style.opacity = 0
                xiazuoshang.className = "active"
                xiazuoshang1.className = ".xia_zuo_shang_1"
            }

        }

        //    点击选项卡
        xuanxiangka()
        function xuanxiangka() {
            var shang = document.querySelectorAll(".shang li")
            var xiaxuanxiang = document.querySelectorAll(".xiaxuanxiang p")
            shang.forEach(function (iteam, index) {
                iteam.onclick = function () {
                    console.log(index)
                    for (i = 0; i < xiaxuanxiang.length; i++) {
                        xiaxuanxiang[i].style.display = "none"
                    }
                    xiaxuanxiang[index].style.display = "block"
                    shang.forEach(function (iteam1, index1) {
                        iteam1.className = ""
                    })
                    iteam.className = "bianhua"
                }
            })
        }

        // 下面小图价格跟随上面变化
        gouwuche()
        function gouwuche() {
            var gouwuchejiage = document.querySelector(".right i")
            var picturerightjiage = document.querySelector(".picture_right_jiage_jiage")
            var gouxuan = document.querySelectorAll(".zhong li div input")
            gouxuan.forEach(function (iteam, index) {
                iteam.onclick = function () {
                    var aaaa = Number(picturerightjiage.innerHTML)
                    gouxuan.forEach(function (iteam1, index1) {
                        if (iteam1.checked) {
                            console.log(iteam1.value)
                            aaaa += Number(iteam1.value)
                            console.log(aaaa)
                        }
                        gouwuchejiage.innerHTML = aaaa
                    })

                }

            })




        }




    </script>

</body>

</html>